<template>
  <div class="proList-container">
    <nav-bar>
      <div slot="center">生产</div>
    </nav-bar>
    <div class="list-nav content-top">
      <van-nav-bar class="app-nav-bar" left-arrow @click-left="onClickLeft">
        <template #title>{{ title }}</template>
      </van-nav-bar>
    </div>
    <div class="m-grid">
        <table border="0" cellPadding="0" cellspacing="0">
          <thead>
            <tr>
              <th>机组</th>
              <th>状态</th>
              <th>异常类型</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(list, index) in deviceList"
              :key="index"
            >
              <td>{{ list.MTNAME }}</td>
              <td>
                <button
                  v-if="list.STATUS === 'END'"
                  style="
                    background-color: #81d3f8;
                    border: none;
                    padding: 3px 6px;
                    border-radius: 2px;
                  "
                >
                  已完成
                </button>
                <button
                  v-if="list.STATUS === 'START'"
                  style="
                    background-color: #81d3f8;
                    border: none;
                    padding: 3px 6px;
                    border-radius: 2px;
                  "
                >
                  处理中
                </button>
              </td>
              <td>{{ list.STARTNAME }}</td>
              <td>{{ list.totleTime }}</td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>
</template>
<script>
import { getProductStateInfo } from "../../api/product";
import NavBar from '../../components/NavBar.vue'
export default {
  name: "pro-list",
  components: {
    NavBar
  },
  data() {
    return {
      title: "",
      deviceList: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
  },
  mounted() {
    switch (this.$route.params.categoryId) {
      case "0":
        this.title = "设备故障";
        break;
      case "1":
        this.title = "计划停机";
        break;
      case "2":
        this.title = "更换工装";
        break;
      case "3":
        this.title = "质量调整";
        break;
      case "4":
        this.title = "更换刀具";
        break;
      case "5":
        this.title = "物料等待";
        break;
      default:
        this.title = "没有匹配";
    }

    //获取设备故障设备列表
  },
  created() {
    getProductStateInfo()
      .then((res) => {
        this.deviceList = res.data[this.$route.params.categoryId].list;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
<style scoped lang="less">
.proList-container {
  .box-container {
    height: 1.35rem;
    line-height: 1.35rem;
    display: flex;
    justify-content: space-around;
    font-size: 0.38rem;
    border-bottom: 0.3px solid #7f7f7f;
    margin: 0 0.1333rem;
    color: #646567;
  }
  .m-grid {
    margin-top: 136px;
    table {
      width: 100%;
      border-right: 1px solid #7f7f7f;
      border-bottom: 1px solid #7f7f7f;
    }
    table tr th {
      padding: 0.17rem 0.1rem;
      font-size: 16px;
      color: #333333;
      border-left: 1px solid #7f7f7f;
      border-top: 1px solid #7f7f7f;
    }
    table tr td {
      padding: 5px 0;
      text-align: center;
      font-size: 0.373333rem;
      color: #646566;
      border-left: 1px solid #7f7f7f;
      border-top: 1px solid #7f7f7f;
    }
  }
}
</style>
